<style include="profile-creation-shared profile-picker-shared cr-shared-style">
  :host {
    --vertical-gap: 24px;
  }

  #title {
    color: var(--theme-text-color);
    font-weight: normal;
    padding-top: 84px;
    position: relative;
    text-align: center;
  }

  #avatarContainer {
    --edit-avatar-border: 3px;
    --edit-avatar-size : 36px;
  }

  #customizeAvatarEllipse {
    background-color: var(--md-background-color);
    border-radius: 50%;
    bottom: 0;
    height: var(--edit-avatar-size);
    margin: auto;
    position: absolute;
    right: 0;
    width : var(--edit-avatar-size);
    z-index: 2;
  }

  #customizeAvatarIcon {
    --cr-icon-button-icon-size: 18px;
    --cr-icon-button-size: calc(var(--edit-avatar-size) -
      2 * var(--edit-avatar-border));
    background-color: var(--md-background-color);
    border-radius: 50%;
    bottom: var(--edit-avatar-border);
    box-shadow: 0 0 2px rgba(60, 64, 67, 0.12), 0 0 6px rgba(60, 64, 67, 0.15);
    box-sizing: border-box;
    margin: auto;
    position: absolute;
    right: var(--edit-avatar-border);
    z-index: 3;
  }

  :host-context([dir='rtl']) #customizeAvatarEllipse {
    left: 0;
    right: initial;
  }

  :host-context([dir='rtl']) #customizeAvatarIcon {
    left: var(--edit-avatar-border);
    right: initial;
  }

  #wrapperContainer {
    display: flex;
    height: calc(max(100vh, var(--view-min-size)) -
      (var(--banner-height) + var(--avatar-size)/2 + var(--cr-button-height) +
       2 * var(--footer-spacing) + 4px));
    justify-content: center;
    margin-inline-end: 16px;
    margin-inline-start: 16px;
    margin-top: calc(var(--avatar-size)/2);
    overflow: auto;
  }

  #wrapper > * {
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: var(--vertical-gap);
  }

  #wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    width: 100%;
  }

  #nameInput {
    --cr-input-placeholder-color: rgba(var(--google-grey-900-rgb), .5);
    --cr-input-border-bottom: 1px solid var(--cr-secondary-text-color);
    height: 32px;
    width: 320px;
  }

  #colorPickerContainer {
    border: 1px solid var(--google-grey-300);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    padding: 15px 36px 23px;
    /* Positions tooltips relatively to this container.
       Fix for https://crbug.com/1182108 */
    position: relative;
  }

  #colorPickerHeader {
    color: var(--cr-primary-text-color);
    padding-bottom: 16px;
  }

  #colorPicker {
    --cr-customize-themes-grid-gap: 8px;
    --cr-customize-themes-icon-size: 44px;
    align-self: center;
  }

  cr-checkbox {
    --cr-checkbox-label-color:  var(--cr-secondary-text-color);
    --cr-checkbox-label-padding-start: 8px;
    height: 20px;
    left: 0;
    margin-inline-end: auto;
    margin-inline-start: auto;
    position: absolute;
    right: 0;
    width: fit-content;
  }

  cr-checkbox[hidden] {
    display: none;
  }

  #save {
    display: flex;
    margin-inline-end: var(--footer-spacing);
    margin-inline-start: auto;
    width: 111px;
  }

  cr-profile-avatar-selector {
    --avatar-size: 72px;
    --avatar-spacing: 18px;
    --avatar-grid-columns: 5;
    height: fit-content;
    padding-bottom: 15px;
    padding-inline-start: 15px;
    padding-top: 15px;
    width: fit-content;
  }

  #selectAvatarWrapper {
    height: 394px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #buttonContainer {
    display: flex;
    justify-content: flex-end;
  }

  #doneButton {
    width : 32px;
  }

  @media (prefers-color-scheme: dark) {
    #nameInput {
      --cr-input-placeholder-color: rgba(var(--google-grey-200-rgb), .5);
    }

    #customizeAvatarIcon {
      border: 1px solid var(--google-grey-500);
    }

    #colorPickerContainer {
      border-color: var(--google-grey-700);
    }
  }
</style>

<div id="headerContainer"
    style$="--theme-frame-color:[[profileThemeInfo.themeFrameColor]];
            --theme-text-color:[[profileThemeInfo.themeFrameTextColor]];
            --theme-shape-color:[[profileThemeInfo.themeShapeColor]]">
  <iron-icon class="banner" icon="profiles:customize-banner"></iron-icon>
  <cr-icon-button id="backButton" iron-icon="cr:arrow-back"
      on-click="onBackClick_" aria-label$="[[getBackButtonAriaLabel_()]]">
  </cr-icon-button>
  <h2 id="title">$i18n{localProfileCreationTitle}</h2>
  <div id="avatarContainer">
    <img class="avatar" alt="" src$="[[selectedAvatar_.url]]">
    <div id="customizeAvatarEllipse"></div>
    <cr-icon-button id="customizeAvatarIcon"
        iron-icon="profiles:create" on-click="onCustomizeAvatarClick_"
        aria-label="$i18n{localProfileCreationCustomizeAvatarLabel}">
    </cr-icon-button>
  </div>
</div>

<div id="wrapperContainer" class="custom-scrollbar">
  <div id="wrapper">
    <cr-input id="nameInput" value="{{profileName_}}" pattern="[[pattern_]]"
        placeholder="$i18n{createProfileNamePlaceholder}"
        on-blur="onProfileNameInputBlur_"
        auto-validate spellcheck="false" required>
    </cr-input>

    <div id="colorPickerContainer">
      <div id="colorPickerHeader">
        $i18n{localProfileCreationThemeText}
      </div>
      <cr-customize-themes id="colorPicker" selected-theme="{{selectedTheme_}}">
      </cr-customize-themes>
    </div>
  </div>
</div>

<div class="footer">
  <cr-checkbox checked="{{createShortcut_}}"
      hidden="[[!isProfileShortcutsEnabled_]]">
    $i18n{createDesktopShortcutLabel}
  </cr-checkbox>

  <cr-button id="save" class="action-button" on-click="onSaveClick_"
      disabled="[[isSaveDisabled_(createInProgress_, profileName_)]]">
    $i18n{createProfileConfirm}
  </cr-button>
</div>

<cr-dialog id="selectAvatarDialog">
  <div slot="title">$i18n{selectAnAvatarDialogTitle}</div>
  <div slot="body">
    <div id="selectAvatarWrapper" class="custom-scrollbar">
      <cr-profile-avatar-selector avatars="[[availableIcons_]]"
          selected-avatar="{{selectedAvatar_}}">
      </cr-profile-avatar-selector>
    </div>
  </div>
  <div id="buttonContainer" slot="footer">
    <cr-button id="doneButton" class="action-button"
        on-click="onDoneSelectAvatarClick_">
      $i18n{selectAvatarDoneButtonLabel}
    </cr-button>
  </div>
</cr-dialog>
